
<template>
	<view class="container">
		<uni-forms ref="form" :model="formData">
			<uni-forms-item label="文章标题" name="title">
				<uni-easyinput v-model="formData.title" placeholder="请输入文章标题" />
			</uni-forms-item>
			<uni-forms-item label="文章作者" name="author">
				<uni-easyinput v-model="formData.author" placeholder="请输入文章作者" />
			</uni-forms-item>
			<uni-forms-item label="文章图片">
				<uni-file-picker ref="filePicker"
					:limit="9"
					title="上传图片"
					:image-styles="{width:100, height:100}"
					:sourceType="['album', 'camera']"
					fileMediatype="image"
					mode="grid"
					@select="selectFile"
					@delete="delFile"
					v-model="imageValue"
					
				/>
			</uni-forms-item>
			<uni-forms-item label="文章内容" name="editor">
				<uni-easyinput v-model="formData.editor" placeholder="请输入文章内容" />
			</uni-forms-item>
			<uni-forms-item label="浏览次数" name="visit">
				<uni-easyinput v-model="formData.visit" placeholder="请输入浏览次数" />
			</uni-forms-item>
		
			<uni-forms-item label="排序" name="sort" required>
				<uni-data-select
					v-model="formData.sort"
					:localdata="[{
						text: '自动',
						value: 9999
					}, {
						text: '第一',
						value: 200 
					}]"
					placeholder="请选择"
				/>
			</uni-forms-item>


			<uni-forms-item label="标签" name="checkbox">
				<uni-data-checkbox style="margin-top:5;" 
				 v-model="formData.checkbox" 
				 mode="button" 
				 multiple
				 :localdata="[{
					text: '选项1',
					value: 1
				}, {
					text: '选项2', 
					value: 2
				}, {
					text: '选项3',
					value: 3
				}]" />
			</uni-forms-item>
			
			<uni-forms-item label="显示" name="status" required >
				<uni-data-checkbox
				mode="tag" 
				 v-model="formData.status" 
				:localdata="[{
					text: '是',
					value: 1
				}, {
					text: '否',
					value: 0
				}]" />
			</uni-forms-item>

			<view class="button-group">
				<button type="primary" @click="submitForm">提交</button>
				<button type="default" @click="resetForm">重置</button>
			</view>
		
		</uni-forms>
	</view>
</template>

<script>
import { ref,reactive,onMounted,getCurrentInstance ,watch, toRef} from 'vue'
import { onLoad }  from "@dcloudio/uni-app"
import { postDemoExit,setuploadFile,getDemoArticle } from '@/apis/api'
import uinFun from '@/uilt/uinFun'
export default {
	components:{
		// nutButton:Button
	},
	setup(){	
	
		const form=ref(null)
		// 定义表单数据对象，包含姓名、手机号和邮箱字段
		const formData = reactive({})

		// 上传图片本地数组
		const imageValue = ref([])
		
		// 上传图片
		const selectFile=(tempFilePaths)=>{
			// 如果选择了多张图片，循环处理每一张
			tempFilePaths.tempFilePaths.forEach((filePath) => {
				// 定义formData
				const from={model:'demo'}
				setuploadFile(filePath,from)
				.then(res => {
					if(res.code != 200) {
						uinFun.setErrorToast(res.data);
						return;
					}
					imageValue.value.push(
						{url:'http://vouchers.karineni.cn' + res.data.getUrl}
					);
				})
				.catch(err => {
					uinFun.setModal('错误提示', err)
				});
			});
		}

		// 删除图片
		const delFile=(e)=>{
			// 删除数组中的指定元素
			imageValue.pic.splice(e.index, 1);
		}

		// 提交表单方法
		const submitForm = () => {
			if (imageValue.value.length > 0) {
				formData.pic = JSON.stringify(imageValue.value)
			}
			formData.checkbox= formData.checkbox.join(',')
			postDemoExit(formData).then(res => {
				// (1)判断是否请求成功
				if (res.code !== 200) {
					uinFun.setModal('错误提示', res.data)
					return false
				}
				// (2)提示提交成功
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})	
			}).catch(err => {
				console.log(err)
				uinFun.setModal('错误提示', err)
			})
		}

		// 重置表单方法
		const resetForm = () => {
			Object.assign(formData, {
				title: '',
				author: '',
				pic: [],
				editor: '',
				visit: '', 
				sort: '',
				url: '',
				status:'',
				checkbox: []
			})
			
			imageValue.value = []
		}
		// 获取页面参数
		const options = reactive({})
		onLoad((get) => {
			Object.assign(options,{id:get.id})
		})
        

		// 加载数据方法
		const loadData = () => {	
			 getDemoArticle(options)
			 .then(res => {
				// (1)判断是否请求成功
				if (res.code !== 200) {
					uinFun.setModal('错误提示', res.data)
					return false
				}	
				// (2)赋值
				Object.assign(formData, res.data)
				//(3)checkbox 字符串分割成字符串数组
				formData.checkbox=res.data.checkbox.split(',').map(Number)
				//(4)图片
				imageValue.value = JSON.parse(res.data.pic).map(item => ({
					url: item.url,
					name: item.name,
					extname: item.extname
				}))
			}).catch(err => {
				uinFun.setModal('错误提示', err)
			})
		}

		// 页面加载时调用加载数据方法
		onMounted(()=>{
			loadData()
		})

		// 返回组件需要的数据和方法
		return {
			form,
			formData,
			submitForm,
			resetForm,
			selectFile,
			delFile,
			imageValue,
            loadData
		}
	},

	onLoad(option) {
		uinFun.setBarTitle('编辑文章')
	}
}
</script>

<style lang="scss">
.container {
	padding: 20px;
}
.button-group {
	margin-top: 30px;
	display: flex;
	justify-content: space-around;
}
.button-group button {
	width: 40%;
}
</style>
